<jsp:include page="pageheader.jsp"/>

<div class="container">
    <div class="well well-sm">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="searchOptionsDropDown" class="col-xs-12 col-sm-2">Search mode</label>
                <div class="col-xs-12 col-sm-10">
                    <select class="form-control" id="searchOptionsDropDown">
                        <option value="0">Search by starting place</option>
                        <option value="1">Search by ending place</option>
                        <option value="2">Search by departure date</option>
                        <option value="3">Search by starting place to a ending place</option>
                        <!--<option value="4">Advanced search</option>-->
                    </select>
                </div>
            </div>
        </form>

    </div>
    <div id="startingPlaceDiv" class="panel panel-info">
        <div class="panel-heading">
            Search by starting place
        </div>
        <div class="panel-body">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="startingPlaceCountryDropDownSearch" class="col-xs-12 col-sm-3">Starting country</label>
                    <div class="col-xs-12 col-sm-9">
                        <select class="form-control" id="startingPlaceCountryDropDownSearch">
                            <option value="-1">Select a country</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="startingPlaceAddressDropDownSearch" class="col-xs-12 col-sm-3">Starting address</label>
                    <div class="col-xs-12 col-sm-9">
                        <select class="form-control" id="startingPlaceAddressDropDownSearch">
                            <option value="-1">Select a address</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for=startingPlaceDepartueDateFieldSearch" class="col-xs-12 col-sm-3">Estimated departue date</label>
                    <div class="col-xs-12 col-sm-9">
                        <input id="startingPlaceDepartueDateFieldSearch" class="form-control" type="text" placeholder="Departue date" >
                        <span class="help-block"><span class="glyphicon glyphicon-info-sign"></span>Departue date is optional</span>
                    </div>
                </div>
            </form>
        </div>
        <div class="panel-footer">
            <button type="button" onclick="onSearchTripStartingClick()" class="btn btn-primary">Search</button>
        </div>
    </div>
    <div id="endingPlaceDiv" class="panel panel-info">
        <div class="panel-heading">
            Search by ending place
        </div>
        <div class="panel-body">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="endingPlaceCountryDropDownSearch" class="col-xs-12 col-sm-3">Ending country</label>
                    <div class="col-xs-12 col-sm-9">
                        <select class="form-control" id="endingPlaceCountryDropDownSearch">
                            <option value="-1">Select a country</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="endingPlaceAddressDropDownSearch" class="col-xs-12 col-sm-3">Ending address</label>
                    <div class="col-xs-12 col-sm-9">
                        <select class="form-control" id="endingPlaceAddressDropDownSearch">
                            <option value="-1">Select a address</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
        <div class="panel-footer">
            <button type="button" onclick="onSearchTripEndingClick()" class="btn btn-primary">Search</button>
        </div>
    </div>
    <div id="departureDateDiv" class="panel panel-info">
        <div class="panel-heading">
            Search by departure date
        </div>
        <div class="panel-body">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="departueDateFieldSearch" class="col-xs-12 col-sm-3">Estimated departure date</label>
                    <div class="col-xs-12 col-sm-9">
                        <input id="departueDateFieldSearch" class="form-control" type="text" placeholder="Departure date" >
                    </div>
                </div>
            </form>
        </div>
        <div class="panel-footer">
            <button type="button" onclick="onSearchTripDepartureClick()" class="btn btn-primary">Search</button>
        </div>
    </div>
    <div id="startingPlaceEndingPlaceDiv" class="panel panel-info">
        <div class="panel-heading">
            Search by starting place <i class="fa fa-arrow-right"></i> ending place
        </div>
        <div class="panel-body">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="startingPlaceCountryDropDownSearch2" class="col-xs-12 col-sm-3">Starting country</label>
                    <div class="col-xs-12 col-sm-9">
                        <select class="form-control" id="startingPlaceCountryDropDownSearch2">
                            <option value="-1">Select a country</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="startingPlaceAddressDropDownSearch2" class="col-xs-12 col-sm-3">Starting address</label>
                    <div class="col-xs-12 col-sm-9">
                        <select class="form-control" id="startingPlaceAddressDropDownSearch2">
                            <option value="-1">Select a address</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="endingPlaceCountryDropDownSearch2" class="col-xs-12 col-sm-3">Ending country</label>
                    <div class="col-xs-12 col-sm-9">
                        <select class="form-control" id="endingPlaceCountryDropDownSearch2">
                            <option value="-1">Select a country</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="endingPlaceAddressDropDownSearch2" class="col-xs-12 col-sm-3">Ending address</label>
                    <div class="col-xs-12 col-sm-9">
                        <select class="form-control" id="endingPlaceAddressDropDownSearch2">
                            <option value="-1">Select a address</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for=startingPlaceDepartueDateFieldSearch2" class="col-xs-12 col-sm-3">Estimated departue date</label>
                    <div class="col-xs-12 col-sm-9">
                        <input id="startingPlaceDepartueDateFieldSearch2" class="form-control" type="text" placeholder="Departue date" >
                        <span class="help-block"><span class="glyphicon glyphicon-info-sign"></span>Departue date is optional</span>
                    </div>
                </div>
            </form>
        </div>
        <div class="panel-footer">
            <button type="button" onclick="onSearchTripStartingEndingClick()" class="btn btn-primary">Search</button>
        </div>
    </div>
    <div id="advancedSearchDiv" class="panel panel-info">
        <div class="panel-heading">
            Advanced search
        </div>
        <div class="panel-body">
        </div>
        <div class="panel-footer">
            <button type="button" onclick="onSearchTripClick()" class="btn btn-primary">Search</button>
        </div>
    </div>
    <div id="resultsDiv" class="panel panel-info">
        <div class="panel-heading">
            Results
        </div>
        <div class="panel-body">
            <table id="table_trips" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Departue Date</th>
                        <th>Arrival Date</th>
                        <th>Departue</th>
                        <th>Destination</th>
                        <th>Car</th>
                        <th></th>
                    </tr>
                </thead>

                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

<jsp:include page="pagefooter.jsp"/>
